<template>
	<!-- fangzhi -->
	<view class="warp" :style="mix_diyStyle">
		<!-- <div class="container">
		        <div id="demoCanvas" class="svga" ref="canvas"></div>
		</div> -->
		<view class="containers" :style="{ backgroundImage: 'url(' + imgUrl + 'user/user_bg.png)' }">
			<view class="" style="width: 750rpx;height: 443rpx;">
				
			</view>
			<view class="title_top">
				数据中心
			</view>
			<view class="data_overview" v-if="authnumber==2 || authnumber==5 ">
				<view class="title">
				<view class="t_left" style="font-weight: 550;">
					数据总览
				</view>
				<view class="t_right"  style="color: #a3a3a3;font-size: 21rpx;margin-left: 20rpx;">
					以下数据更新至今天 {{nowtime}}
				</view>
				</view>
				<view class="data_list">
					<view class="d_list">
						<view class="dl_item" >
							<view class="dli_left">
								<image style="width: 80rpx;height: 80rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/dzc_icon/shop.png"></image>
							</view>
							<view class="deli_right">
								<view class="d_top" style="font-size: 26rpx;font-weight: 550;">
								全国商户
								</view>
								<view class="d_center">
									1家
								</view>
								<view class="d_bottom" style="font-size: 22rpx;">
									<span style="color: #a3a3a3;">今日活跃</span>
									<span style="color: red;">+0</span>
									<span style="color: #a3a3a3;">家</span>
								</view>
							</view>
						</view>
						<view class="dl_item" >
							<view class="dli_left">
								<image style="width: 80rpx;height: 80rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/dzc_icon/staff.png"></image>
							</view>
							<view class="deli_right">
								<view class="d_top" style="font-size: 26rpx;font-weight: 550;">
								全国员工
								</view>
								<view class="d_center">
									<span style=" font-size:32rpx;color: #f6c649;">{{dataview.allStaffs}}</span>个
								</view>
								<view class="d_bottom" style="font-size: 22rpx;">
									<span style="color: #a3a3a3;">今日活跃</span>
									<span style="color: red;">+{{dataview.addStaffs}}</span>
									<span style="color: #a3a3a3;">个</span>
								</view>
							</view>
						</view>
						<view class="dl_item" >
							<view class="dli_left">
								<image style="width: 80rpx;height: 80rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/dzc_icon/customer.png"></image>
							</view>
							<view class="deli_right">
								<view class="d_top" style="font-size: 26rpx;font-weight: 550;">
								意向客户
								</view>
								<view class="d_center">
									<span style="font-size:32rpx;color: #f6c649;">{{dataview.intendedCustomers}}</span>个
								</view>
								<view class="d_bottom" style="font-size: 22rpx;">
									<span style="color: #a3a3a3;">今日活跃</span>
									<span style="color: red;">+{{dataview.addIntendedCustomers}}</span>
									<span style="color: #a3a3a3;">个</span>
								</view>
							</view>
						</view>
						<view class="dl_item" >
							<view class="dli_left">
								<image style="width: 80rpx;height: 80rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/dzc_icon/performance.png"></image>
							</view>
							<view class="deli_right">
								<view class="d_top" style="font-size: 26rpx;font-weight: 550;">
								销售业绩
								</view>
								<view class="d_center">
									<span style="font-size:32rpx;color: #f6c649;">{{dataview.salesPerformances}}</span>元
								</view>
								<view class="d_bottom" style="font-size: 22rpx;">
									<span style="color: #a3a3a3;">今日增加</span>
									<span style="color: red;">+{{dataview.addSalesPerformances}}</span>
									<span style="color: #a3a3a3;">元</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 任务监控 商户-->
			<view class="monitor_task" v-if="authnumber==2 || authnumber==5">
				<view class="m_title">
					<view class="mt_left">
						任务监控
					</view>
					<view class="mt_right" @click="totaskinfo()">
						<span style="font-weight: 550;font-size: 24rpx;display: block;">任务中心</span>
						<!-- <image style="width: 20rpx;height: 20rpx;margin-left: 5rpx;" :src="imgUrl + 'member/right_down.png'" mode="aspectFit" lazy-load /> -->
					</view>
				</view>
				<view class="task_f">
					<view class="f_left">
						<view class="fl_title">
							达标员工
						</view>
						<view class="">
							<span style="font-size: 34rpx;font-size:32rpx;color: #f6c649;">{{taskinfo.completedNum}}</span>
							<span style="font-size: 24rpx;">人</span>
						</view>
					</view>
					<view class="f_right">
						<view class="fl_title">
							不达标员工
						</view>
						<view class="">
							<span style="font-size: 34rpx;color: #f6c649;">{{uncompletedNum}}</span>
							<span style="font-size: 24rpx;">人</span>
						</view> 
					</view>
				</view>
				<view class="defreent_title">
					异常监控
				</view>
				<view class="list_inot">
					<view class="l_item" v-for="(item,index) in unindexlist" :key="index">
						<view class="title_l">
							{{item.indexTitle}}
						</view>
						<view class="">
							<span style="font-size: 34rpx;color: #f6c649;">{{(item.totalNumberPeople-item.completedNum)}}</span>
							<span style="font-size: 24rpx;">人未完成</span>
						</view>
					</view>
				</view>
			</view>
			<!-- 销售员工任务数据 -->
			<view class="xiaoshou" v-if="authnumber==1">
				<view class="card" v-for="(item,index) in tasklist" :key="index"  >
					<view class="card_box">
						<view class="card_top">
							<view class="image">
								<image style="width: 149rpx;height: 133rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/farword/two.png"></u-image>
							</view>
							<view class="right_c">
								<view class="c_left">
									<view class="title">
										{{item.taskName}}
									</view>
									<view class="index">
										暂无排名
									</view>
									<view class="time">
										<span v-if="item.taskModel==0">
											 {{item.startTime}}___{{item.endTime}}
										 </span>
										<span v-if="item.taskModel==1">每日</span>
										<span v-if="item.taskModel==2">每周</span>
										<span v-if="item.taskModel==3">每月</span>
									</view>
								</view>
								<view class="c_right">
										<u-circle-progress border-width="10" width="113" inactive-color="#fff" bg-color="rgba(0,0,0,0)" active-color="#ff0000" :percent="item.allpersent*1">
											<view class="u-progress-content">
												<text class='u-progress-info'>{{item.allpersent}}%</text>
											</view>
										</u-circle-progress>
								</view>
							</view>
						</view>
						<view class="card_bottom">
							<view class="poush_good" v-for="(val,idx) in item.indexInfoList" :key="idx">
								<view class="left">
									<view class="title">
										{{val.indexTitle}}
									</view>
									<view class="steps">
										<!-- <u-line-progress height="12"  active-color="#ff0000" :percent="((val.completedIndexNum/val.indexNum)*100).toFixed(1)"></u-line-progress> -->
									<progress activeColor="#fe9a22" :percent="((val.completedIndexNum/val.indexNum)*100).toFixed(1)" show-info stroke-width="3" />
									</view>
									<view class="tetx">
										完成目标进度 {{val.completedIndexNum}}/{{val.indexNum}}
									</view>
								</view>
								<view class="right">
									<view class="btn" @click="addcomplatetask(val,item)">
										去完成
									</view>
								</view>
							</view>
							<!-- <view class="push_all">
								<view class="left">
									<view class="title">
										推广总次数
										</view>
									<view class="steps">
										<u-line-progress height="12" active-color="#ff0000" :percent="100"></u-line-progress>
									</view>
									<view class="tetx">
										完成目标进度 6/3
									</view>
								</view>
								<view class="right">
									<view  class="btnok">
										已完成
									</view>
								</view>
							</view> -->
						</view>
						
					</view>
				</view>
				<view style="text-align: center;" class="" v-if="tasklist.length==0">
					<image  src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/clear.png" mode="widthFix"></image>
				     <view class="" style="color: #a3a3a3;">
				     	暂无数据
				     </view>
				</view>
			</view>
			<!-- 无数据提示 -->
		
			<!-- 榜单 -->
			<view class="toplist" v-if="authnumber==2 || authnumber==5">
				<view class="tl_top">
					<view class="tlt_left">
						商户红黑排行版
					</view>
					<view class="tlt_right">
						<view class="tltl_list">
							<view @click="tanchange1(index)" :class="tabnum1==index?'tltl_item active':'tltl_item'" v-for="(item,index) in tablist1" :key="index">
								{{item.name}}
							</view>
							 
						</view>
					</view>
				</view>
				<view class="tl_stab">
					<view class="tls_list">
						<view @click="tanchange2(index)" :class="tabnum2==index?'tlsl_item active2':'tlsl_item'" v-for="(item,index) in tablist2" :key="index">
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- 数据 -->
				<view class="title_list">
					<view class="title_l">
						<view class="button">
							榜首
						</view>
					</view>
					<view class="title_r">
						<view class="button_r">
							垫底
						</view>
					</view>
				</view>
				<view class="list_t">
					<view class="list_l">
						<view class="ll_item" v-for="(item,index) in leaderlist.redList" :key="index">
							<view class="avator">
								<image v-if="item.memberAvatar" style="width: 50rpx; height: 50rpx;border-radius: 50%;margin-right: 10rpx;" :src="'https://image.dongzhice.com'+item.memberAvatar" mode=""></image>
								<image v-else style="width: 50rpx; height: 50rpx;border-radius: 50%;margin-right: 10rpx;" :src="avator" mode=""></image>
							</view>
							<view class="name">
								<span>{{item.memberName}}</span>
								<span v-if="item.orderNum" style="margin-left: 20rpx;color: #ff0000;">{{item.orderNum}}</span>
							</view>	
						</view>
					</view>
					<view class="list_r">
						<view class="ll_item" v-for="(item,index) in leaderlist.blackList">
							<view class="avator">
							<image v-if="item.memberAvatar" style="width: 50rpx; height: 50rpx;border-radius: 50%;margin-right: 10rpx;" :src="'https://image.dongzhice.com'+item.memberAvatar" mode=""></image>
							<image v-else style="width: 50rpx; height: 50rpx;border-radius: 50%;margin-right: 10rpx;" :src="avator" mode=""></image>
							</view>
							<view class="name">
								<span>{{item.memberName}}</span>
								<span v-if="item.orderNum" style="margin-left: 20rpx;color: #ff0000;">{{item.orderNum}}</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom_b">
				
			</view>
		</view>
		<!-- 定位 -->
		<positionIfor @lodAddress="getLocation()"></positionIfor>
	</view>
</template>

<script>
	import positionIfor from '@/components/position_info.vue';
	import SVGA from "svgaplayerweb";
	import { mapState} from 'vuex';
import { imgUrl } from "../utils/config";
	export default {
		name:"homeIndex",
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				nowtime:null,
				tablist1:[{name:'今日'},{name:'昨日'},{name:'7天'},{name:'30天'}],
				tablist2:[{name:'销售金额'},{name:'订单数'},{name:'推广数'},{name:'成交客户数'}],
				tabnum1:0,
				tabnum2:0,
				queryform:{
					pageSize:2,
					current:1,
					storeId:''
				},
				dataview:{},//数据总览
				taskinfo:{},//最新任务数据
				uncompletedNum:0,//未达标人数，
				unindexlist:[],//异常数据
				leaderlist:{},//排行榜
				leaderform:{
					timeType:1,
					dataType:1
				},
				avator:'https://admin.dongzhice.com/resources/images/default/default_image_user_portrait.png',
				address:'',
				authnumber:'',//身份标识 1-会员，2-商户，3-平台，4-游客
				listform:{
				userId:'',
				current: 1,
				pageSize: 10,	
				},
				tasklist:[],
				ltotal:0,
				addform:{},//完成指标
			};
		},
		computed:{
			...mapState(['hasLogin', 'userInfo', 'userCenterData']),
		},
		components:{
			positionIfor
		},
		mounted() {
			// 当前时间
			 this.nowtime=this.timechange(new Date().getTime())	
			
			this.gettaskinfo()//任务数据
		    this.getallnumber()//总览数据
			this.getleaderlist()//排行榜数据
			this.getautherinfo()//身份数据
			this.gettasklist()
			// 礼物svga动画
			// let player = new SVGA.Player("#demoCanvas");
			// let parser = new SVGA.Parser("#demoCanvas");
			// parser.load("../static/001.svga", function(videoItem) {
			//     player.setVideoItem(videoItem);
			// 	player.startAnimation();
			// 			        });
		},
		methods:{
			// 获取身份数据
			getautherinfo(){
			  this.$request({
			  	url:'v3/seller/front/vendor/roles',
			  	method:"GET",
			  	data:{vendorMobile:this.userCenterData.memberMobile}
			  }).then(res=>{
				  this.authnumber=res.msg
			  })	
			},
			// 获取销售端任务列表
			gettasklist(){
				this.listform.userId=this.userCenterData.memberId
				this.$request({
					url:'v3/task/front/appTask/sale/list',
					method:"GET",
					data:this.listform
				}).then(res=>{
					this.tasklist=res.data.list
					this.ltotal=res.data.pagination.total
					this.tasklist.forEach(item=>{
						item.allnum=0
						item.indexInfoList.forEach(val=>{
							item.allnum+=(val.completedIndexNum/val.indexNum)
						})
						
						item.allpersent=((item.allnum/item.indexInfoList.length)*100).toFixed(1)
					})
									 
				})
			},
			// 完成任务
			addcomplatetask(val,item){
				this.addform.taskId=item.id.toString()
				this.addform.indexId=val.id.toString()
				// this.addform.taskIndex=val.indexNum
				this.addform.userId=this.userCenterData.memberId.toString()
				this.addform.currForwardPeopleId=this.userCenterData.memberId.toString()
				this.addform.currForwardPeople=this.userCenterData.memberName
				// this.$u.api.intaior.addcompletetaskapi(this.addform).then(res=>{
				// 	if(res){
				// 		this.gettasklist()
				// 	}
				// })
				// 储存值
				uni.setStorageSync('addform',JSON.stringify(this.addform))
				 // 跳转
				 if(val.indexId=='1'){
					 // 跳转商品
					 uni.navigateTo({
						 url:"/standard/product/list"
					 	// url:"/standard/product/detail?form="+encodeURIComponent(JSON.stringify(this.addform))
					 })
				 }else if(val.indexId=='2'){
					 // 跳转素材
					uni.switchTab({
						 url:"/pages/index/information"
					 	// url:"/pages/index/information?form="+encodeURIComponent(JSON.stringify(this.addform))
					 })
				 }
			},
			// 定位
			getLocation(address){
			   	// address就是组件传出的具体位置
			   	this.address = address;
								console.log(7777777,uni.getDeviceInfo());
								uni.setStorageSync('address', this.address);
								console.log(this.address,'地址');
								 setTimeout(()=>{
									 console.log(uni.getStorageSync('address'),3434344);
								 },500)
							},
			   //获取总览数据
				getallnumber(){
					this.$request({
						url:'v3/task/front/appDataCenter/dataView',
						method:'GET'
					}).then(res=>{
						this.dataview=res.data
					})
				},
		        // 获取任务数据
				gettaskinfo(){
					this.queryform.storeId=this.userCenterData.memberId
				this.$request({
					url:'v3/task/front/appTask/page',
					method:'GET',
					data:this.queryform
				}).then(res=>{
					this.taskinfo=res.data.list[0]
					this.uncompletedNum=this.taskinfo.executorList.length-this.taskinfo.completedNum
				     // 过滤异常数据
					 this.taskinfo.indexList.forEach(item=>{
						 if(item.completedNum!=item.totalNumberPeople){
							 this.unindexlist.push(item)
						 }
					 })

				})	
				},
				// 获取排行榜数据
				getleaderlist(){
				this.$request({
					url:'v3/task/front/appDataCenter/leaderboards',
					method:'GET',
					data:this.leaderform
				}).then(res=>{
					this.leaderlist=res.data
				})
				},
				totaskinfo(){
					uni.navigateTo({
						url:'/standard/task/task'
					})
				},
			// 切换
			tanchange1(idx){
				this.tabnum1=idx
				this.leaderform.timeType=idx+1
				this.getleaderlist()
			},
			tanchange2(idx){
				this.tabnum2=idx
				this.leaderform.dataType=idx+1
				this.getleaderlist()
			},
			timechange(time){
				// console.log(time);
					 //时间戳为10位需*1000，时间戳为13位的话不需乘1000
					  var date = new Date(time);
					  var Y = date.getFullYear();
					  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth()+1) : date.getMonth() + 1);
					  var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
					  var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
					  var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes())+ ':';
					  var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
					  // console.log(Y);
					  return  Y+'-'+ M +'-'+ D + h + m + s;
				}
		}, 
	
	}
</script>
<style>
	page {
		background: $bg-color-split;
		width: 750rpx;
		margin: 0 auto;
		position: relative;
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
.warp{
	// .svga {
	//     width: 200px;
	//     height: 200px;
	//     margin: 100px auto;
	// 	background-color: black;
	// }
	 position: relative;
	.containers{
		height: 100%;
		position: relative;
		background-size: 750rpx 443rpx;
		/* #ifdef MP||APP-PLUS */
		background-size: 750rpx calc(443rpx + var(--status-bar-height));
		/* #endif */
		background-repeat: no-repeat;
	}
	.title_top{
		width: 700rpx;
		height: 60rpx;
		background-color: #fff;
		text-align: center;
		line-height: 60rpx;
		position: absolute;
		top: 120rpx;
		left: 25rpx;
		border-radius: 20rpx;
	}
	.data_overview{
		width: 700rpx;
		height: 440rpx;
		 padding: 20rpx;
		background-color: #fff;
		position: absolute;
		top: 190rpx;
		left: 25rpx;
		border-radius: 20rpx;
		.title{
			display: flex;
			align-items: center;
		}
		.data_list{
		
			.d_list{
				padding: 20rpx 30rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.dl_item{
					height: 160rpx;
					display: flex;
					align-items: center;
					.dli_left{
						margin-right: 10rpx;
					}
				}
				
			}
			
		}
	}
	.monitor_task{
		width: 700rpx;
		// height: 450rpx;
		background-color: #fff;
		position: absolute;
		top: 650rpx;
		left: 25rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		.m_title{
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #e3e3e3;
			.mt_left{
				font-weight: 550;
				
			}
			.mt_right{
				display: flex;
				align-items: center;
			}
		}
		.task_f{
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			.f_right,.f_left{
				width: 50%;
				text-align: center;
				.fl_title{
					font-weight: 550;
					font-size: 24rpx;
				}
			}
			.f_left{
				border-right: 2rpx solid #e3e3e3;
			}
		}
		.defreent_title{
			font-weight: 550;
			padding-bottom: 10rpx;
		}
		.list_inot{
			font-size: 24rpx;
			padding: 16rpx 0;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.l_item{
				width: 28%;
				text-align: center;
				.title_l{
					color: #959595;
					font-weight: 550;
					padding-bottom: 10rpx;
				}
			}
		}
	}
	.xiaoshou{
		width: 750rpx;
		// height: 440rpx;
		 // padding: 20rpx;
		
		position: absolute;
		top: 190rpx;
		// left: 30rpx;
		border-radius: 20rpx;
		.card{
			width: 690rpx;
			margin-top: 0rpx;
			padding: 30rpx;
			.card_box{
				background-image: linear-gradient(to bottom, #fbc6c9, #fef4f4);
				width: 690rpx;
				border-radius: 10rpx;
				// height: 642rpx;
				.card_top{
					width: 690rpx;
					height: 202rpx;
					// background-image: linear-gradient(to bottom, #fbc6c9, #fef4f4);
				    border-radius: 10rpx 10rpx 0 0;
					position: relative;
					.image{
						position: absolute;
						top: -20rpx;
						left: 20rpx;
						width: 149rpx;
						height: 133rpx;
						// background-image: url(../../../static/common/image1.png);
					    // z-index: 9999;
					}
					.right_c{
						position: absolute;
						top: 26rpx;
						right:26rpx;
						display: flex;
						width: 476rpx;
						.c_left{
							.title{
								font:32rpx PingFang-SC-Bold;
								margin-bottom: 20rpx;
							}
							.index{
								width: 312rpx;
								
								font-size: 24rpx;
								
							}
							.time{
								line-height: 32rpx;
								font: 24rpx PingFang-SC-Medium;
								color: #656565;
							}
						}
						.c_right{
							
							.u-progress-content {
									display: flex;
									align-items: center;
									justify-content: center;
								}
								
								.u-progress-dot {
									width: 16rpx;
									height: 16rpx;
									border-radius: 50%;
									background-color: #fb9126;
								}
								
								.u-progress-info {
									font-size: 24rpx;
									padding-left: 10rpx;
									letter-spacing: 2rpx;
									color:#ff0000;
								}
						}
					}
				}
				.card_bottom{
					width: 690rpx;
					// height: 320rpx;
					padding: 15rpx;
					// background-color: #fff;
					border-radius: 0 0 10rpx 10rpx;
				.poush_good{
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 15rpx;
						 .left{
							
							 .title{
								font:28rpx PingFang-SC-Medium; 
							 }
							 .steps{
								 width: 412rpx; 
							 }
							 .tetx{
								font-size: 24rpx;
								color: #656565;
							 }
						 }
						 .right{
							 .btn{
								width: 138rpx;
								 height: 52rpx;
								 border-radius: 26rpx;
								 background-image: linear-gradient(270deg,#ff4d57,#ee212d);
								 text-align: center;
								 line-height: 52rpx;
								 color: #fff; 
							 }
							 .btnok{
								width: 138rpx;
								 height: 52rpx;
								 border-radius: 26rpx;
								 background-color: #fabdc0;
								 text-align: center;
								 line-height: 52rpx;
								 color: #fff; 
							 }
							 
						 }
					}
					
				}
				.more{
					background-color: #fff;
					margin-top: 30rpx;
					width: 100%;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					// font:30rpx PingFang-SC-Medium;
					 border-radius: 10rpx;
					 
				}
			}
		}
	}
	.toplist{
		
		width: 700rpx;
		// height: 440rpx;
		background-color: #fff;
		position: absolute;
		top: 1120rpx;
		left: 25rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		
		.tl_top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.tlt_right{
				padding: 10rpx 10rpx;
				height: 66rpx;
				line-height: 46rpx;
				border-radius: 42rpx;
				background-color: #e4e4e4;
				.tltl_list{
					display: flex;
					justify-content: space-between;
					.tltl_item{
						padding: 0 10rpx;
						border-radius: 28rpx;
					}
					.active{
						background-color: #fff;
					}
				}
			}
		}
		.tl_stab{
			margin-top: 20rpx;
			padding: 0 20rpx;
			.tls_list{
				display: flex;
				justify-content: space-between;
				.tlsl_item{
					
				}
				.active2{
					color: red;
				}
			}
		}
		.title_list{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			.title_r,.title_l{
				// padding-top: 20rpx;
				width: 50%;
				  text-align: center !important;
				.button{
					text-align: center;
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 30rpx;
					background-color: #faead0;
					margin-left: 20%;
				}
				.button_r{
					margin-left: 20%;
					text-align: center;
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 30rpx;
					background-color: #e4e4e4;
				}
			}
			
		}
		.list_t{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			.list_l,.list_r{
				width: 50%;
				text-align: center;
				.ll_item{
					display: flex;
					align-items: center;
					margin-left: 10%;
					margin-bottom: 10rpx;
				}
			}
			.list_l{
				border-right: 2rpx solid #e3e3e3;
			}
		}
		
	}
	.bottom_b{
		width: 700rpx;
		height: 140rpx;
		// background-color: #fff;
		position: absolute;
		top: 1600rpx;
		left: 25rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}
}
</style>